<#import '/ftlLibrary/properteisVariable.ftl' as pv/>
<link href="assets/css/bootstrap-select.css" rel="stylesheet"/>
<link href="assets/css/modify.css" rel="stylesheet"/>
<script src="assets/js/select2/select2.js"></script>
<link href='assets/css/fullcalendar/fullcalendar.css' rel='stylesheet'/>
<script src='assets/js/fullcalendar/fullcalendar.js'></script>
<style>
    .fc-event-title {
        color: blue;
    }

    .fc-event-hori {
        background-color: red;
    }

    .modal-header {
        background-color: #E9F5FF !important;
        color: #8dafc9 !important;
    }

    .modal-title {
        font-size: 16px !important;
    }

    .bootbox-expand-button {
        width: 19px;
        height: 19px;
        border: none;
        cursor: pointer;
        -webkit-appearance: none;
        float: right;
        top: -18px;
        left: -30px;
        position: relative;
        background: #E9F5FF url("assets/img/nav-img/icon_window.png") no-repeat 0 0;
    }

    .bootbox-close-button {
        width: 19px;
        height: 19px;
        border: none;
        cursor: pointer;
        -webkit-appearance: none;
        float: right;
        top: 4px;
        left: -5px;
        position: relative;
        background: #E9F5FF url("assets/img/nav-img/icon_close.png") no-repeat 0 0;
    }

    .bootbox .modal-dialog {
        width: 50% !important;
    }

    .modal-content {
        width: 100%;
    }

    .expandView {
        width: 100%;
    }
</style>
<div class="row" style="margin-left: 0px!important;">
    <#list listMap as data>
        <!-- 映射列表 -->
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 "
             style="border-bottom: 1px solid #8dafc9;padding-top: 5px;padding-bottom:5px;">
            课程日期：${data.startDate}-${data.endDate} ${data.startTime}-${data.endTime}，${data.weekDay}
            课程节数：${data.expendClassHour}节 单节消耗课时数：${data.pitchNumber}
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="widget flat radius-bordered">
                <div class="widget-body no-padding">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
                         style="border: 1px solid #8dafc9;height: 40px;background-color: #fff;line-height: 40px">
                        <label> TIPS:1 请选择需变动课程:</label>
                        <label class="pull-right" style="cursor: pointer;" onclick="showOrHidden(this)">展开</label>
                    </div>
                    <div class="table-scrollable modelClassChangeShow"
                         style="border: 1px solid #8dafc9;border-top: none;">

                        <!-- 数据表列信息列表 -->
                        <table class="table table-hover dataTable newtable" id="tssClassesChangeTable">
                            <thead>
                            <tr>
                                <th title="选择" class="checkboxColumnTh">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" class="chkAll">
                                            <span class="text"></span>
                                        </label>
                                    </div>
                                </th>
                                <th title="课程周次">课程周次</th>
                                <th title="上课时间">上课日期</th>
                                <th title="上课时间">上课时间</th>
                                <th title="周几上课">周几上课</th>
                                <th title="授课老师">授课老师</th>
                                <th title="上课教室">上课教室</th>
                                <th title="耗课时数">耗课时数</th>
                            </tr>
                            </thead>
                            <tbody id="classChangeTbody">
                            <#list data["lessonsList"] as cl>
                                <tr>
                                    <td class="checkboxColumnTd">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" class="chk" name="id" value="${cl.id}">
                                                <span class="text"></span>
                                            </label>
                                        </div>
                                    </td>
                                    <td></td>
                                    <td>${cl.classTime}</td>
                                    <td>${data.startTime}-${data.endTime}</td>
                                    <td><@dictionary groupCode="weekDay"
                                        dictionaryCode="${data.weekDay}";weekDay>${weekDay.value }
                                    </@dictionary></td>
                                    <td>${cl..adminUserId}</td>
                                    <td>${cl.classId}</td>
                                    <td>${data.pitchNumber}</td>
                                </tr>
                            </#list>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadding-left nopadding-right"
                         style="border: 1px solid #8dafc9;background-color: #fff;margin-top: 10px;">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height: 40px;line-height: 40px">
                            <label> TIPS:2 请更改变动类型:</label>
                            <label class="pull-right">
                                <button type="button" class="btn btn-lg"
                                        style="background-color: #FFAB00;height: 30px;margin-top: 5px;line-height: 10px;color: #000">
                                    确定并更改课表
                                </button>
                            </label>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="height: 40px;line-height: 40px">
                            <button type="button" class="btn btn-lg" style="background-color: #23a8f5;color: #fff"
                                    value="1"
                                    onclick="classChangeSingular(this)">课程变动
                            </button>
                            <button type="button" class="btn btn-lg" style="background-color: #c0c0c0;" value="2"
                                    onclick="classChangeSingular(this)">停课
                            </button>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 nopadding-left nopadding-right"
                         style="border: 1px solid #8dafc9;border-top: none;background-color: #fff">
                        <div id="classChangeSingular"
                             class="col-xs-12 col-sm-12 col-md-12 col-lg-12 hidden nopadding-left nopadding-right"
                             style="height: 60px;line-height: 60px;border-bottom: 1px solid #8dafc9">
                            <label class="classChangeDiv hidden">
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <label class="margin-right-10">
                                    <label>
                                        变动上课日期：
                                    </label>
                                    <label>
                                        <input data-bv-date-format="YYYY-MM-DD" id="startDate"
                                               data-bv-message="The field is not valid"
                                               data-bv-date-message="请正确输入一个时间" data-bv-date="true" size="10"
                                               name="startDate" alt="开班日期" placeholder="开班日期"
                                               type="text" title="开班日期"
                                               class="form-control form-control date-picker"
                                               onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})"
                                               style="height: 30px;width:100px;border-radius: 4px!important;border: 1px solid #c6d5d8;">
                                    </label>
                                </label>
                                <label class="margin-right-10">
                                    <label>
                                        变动时间：
                                    </label>
                                    <label>
                                        <input data-bv-date-format="YYYY-MM-DD" id="startTimes"
                                               data-bv-message="The field is not valid"
                                               data-bv-date-message="请正确输入一个时间" data-bv-date="true" size="10"
                                               name="startTimes" placeholder="上课时间"
                                               type="text"
                                               class="form-control form-control date-picker"
                                               onfocus="WdatePicker({doubleCalendar:false,dateFmt:'HH:mm'})"
                                               style="height: 30px;width:100px;border-radius: 4px!important;border: 1px solid #c6d5d8;">
                                    </label>
                                    至
                                    <label>
                                        <input data-bv-date-format="YYYY-MM-DD" id="endTimes"
                                               data-bv-message="The field is not valid"
                                               data-bv-date-message="请正确输入一个时间" data-bv-date="true" size="10"
                                               name="endTimes" placeholder="上课时间"
                                               type="text"
                                               class="form-control form-control date-picker"
                                               onfocus="WdatePicker({doubleCalendar:false,dateFmt:'HH:mm'})"
                                               style="height: 30px;width:100px;border-radius: 4px!important;border: 1px solid #c6d5d8;">
                                    </label>
                                    <!--<label>-->
                                    <!--<a style="cursor: pointer" onclick="noChange(this)" value="0">不变动上课时间</a>-->
                                    <!--</label>-->
                                </label>
                                <label class="margin-right-10">
                                    <label>
                                        变动教室：
                                    </label>
                                    <label>
                                        <select class="form-select-1" name="roomId" id="roomId"
                                                style="width:100px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;"
                                                value="">
                                        </select>
                                    </label>
                                </label>
                                <label class="margin-right-10">
                                    <label>
                                        变动老师：
                                    </label>
                                    <label>
                                        <select class="form-select-1" name="adminUserId" id="adminUserId"
                                                style="width:100px;height: 30px;border: 1px solid #c6d5d8;border-radius: 4px !important;">
                                        </select>
                                    </label>
                                </label>
                            </label>
                            <label class="classClosedDiv hidden">

                            </label>
                            <input type="hidden" name="lessonsObject" id="classColsedId">
                            <input type="hidden" name="type" value="1">
                        </div>
                        <div class="row calendarDiv" style="margin: 0;">
                            <div id='calendar' style="display: none">
                                <div class="event">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </#list>
</div>
<script>
    $(".selectpicker").select2();
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth() + 1;
    var y = date.getFullYear();

    function expandView() {
        $(".modal-dialog").toggleClass("expandView");
        $(".modal-content").toggleClass("expandView");
        $(".bootboxs").toggleClass("bootbox");
    }

    function showOrHidden(that) {
        $(".modelClassChangeShow").toggleClass("hidden");
    }

    //    获取选中项目整行数据 并组装成对象数组
    function assemblyObj() {
        var listDataArr = [];
        var thArr = ["id"];
        $("#tssClassesChangeTable").find("th").each(function (thIdex, thItem) {
            if (thIdex == 0) {
                return
            }
            var thItemVal = $(thItem).html();
            thArr.push(thItemVal);
        })

        var trs = $("#classChangeTbody tr");
        trs.each(function (trIndex, trItem) {
            listDataArr[trIndex] = {};
            $(trItem).find("td").each(function (tdIndex, tdItem) {
                var tdVal;
                if (tdIndex == 0) {
                    tdVal = $(tdItem).find("input").val();
                } else {
                    tdVal = String($(tdItem).text());
                }
                var key = thArr[tdIndex];
                listDataArr[trIndex][key] = tdVal;
            })
        })
        return listDataArr;
    }

    //    不变动上课时间
    function noChange(that) {
        var val = $(that).attr("value");
        if (val == 0) {
            $("#startTimes").prop("disabled", true);
            $("#endTimes").prop("disabled", true);
            $(that).html("变动上课时间");
            $(that).attr("value", "1");
            $("#startTimes").val("");
            $("#endTimes").val("");
        }
        if (val == 1) {
            $("#startTimes").prop("disabled", false);
            $("#endTimes").prop("disabled", false);
            $(that).html("不变动上课时间")
            $(that).attr("value", "0")
        }

    }


    //提交表单 组装课程数据
    function zzObj() {
        var obj = [];
        $(".event").find(".date").each(function () {
            var classTimeObj = {};
            var classTime = $(this).val();
            var weekDay = new Date(classTime).getDay();
            classTimeObj.classTime = classTime;
            classTimeObj.weekDay = weekDay;
            obj.push(classTimeObj);
        })
        //    排序
        obj.sort(
            function (a, b) {
                if ((new Date(a.classTime)).getTime() < (new Date(b.classTime)).getTime()) return -1;
                if ((new Date(a.classTime)).getTime() > (new Date(b.classTime)).getTime()) return 1;
                return 0;
            }
        );
        return obj;
    }

    //    课程变动或停课判断
    function classChangeSingular(that) {
        var type = $(that).attr("value");
        var num = 0;
        var indexArr = [];//选中列表index数组
        $("#classChangeTbody").find(".chk").each(function () {
            if ($(this).prop("checked")) {
                var index = $(this).parents(".checkboxColumnTd").parent().index();
                indexArr.push(index);
                num++;
            }
        })
        var listDataArr = assemblyObj();//列表数据
        var listIdArr = [];
        for (var i = 0; i < indexArr.length; i++) {
            listIdArr.push(listDataArr[indexArr[i]]["id"]);
        }

        if (num == 0) {
            $("#classChangeSingular").addClass("hidden");
            return;
        }
        if (num == 1) {
            $("#classChangeSingular").removeClass("hidden");
            $(".fc-header").remove();
            $(".fc-content").remove();
            if (type == 1) {
                $(".classChangeDiv").removeClass("hidden");
                $(".classClosedDiv").addClass("hidden");
                $("#startDate").val(listDataArr[indexArr[0]]["上课日期"]);
                $("#startTimes").val(listDataArr[indexArr[0]]["上课时间"].split("-")[0]);
                $("#endTimes").val(listDataArr[indexArr[0]]["上课时间"].split("-")[1]);
                $(".classClosedDiv").empty();
                $("#classChangeId").val(listDataArr[indexArr[0]]["id"]);
            }
            if (type == 2) {
                $(".classChangeDiv").addClass("hidden");
                $(".classClosedDiv").removeClass("hidden");
                $("#startDate").val("");
                $("#startTimes").val("");
                $("#endTimes").val("");
                $(".classClosedDiv").append('&nbsp;&nbsp;&nbsp;&nbsp;瑞宝爱阅读&nbsp;&nbsp;' + listDataArr[indexArr[0]]["上课日期"] + '&nbsp;&nbsp;即将进行课程操作；')
            }
        }
        if (num > 1) {
            $("#classChangeSingular").removeClass("hidden");
            if (type == 1) {
                $(".classChangeDiv").removeClass("hidden");
                $(".classClosedDiv").addClass("hidden");
                $(".classClosedDiv").empty();
                $("#startDate").val(listDataArr[indexArr[0]]["上课日期"]);
                $("#startTimes").val(listDataArr[indexArr[0]]["上课时间"].split("-")[0]);
                $("#endTimes").val(listDataArr[indexArr[0]]["上课时间"].split("-")[1]);
                $(".fc-header").remove();
                $(".fc-content").remove();
                $("#calendar").find('.event').html('');
                $("#calendar").show();
                $(".fc-button-today").click();
                for (var i = 0; i < indexArr.length; i++) {
                    var html = '<input type="hidden" class="date" id="' + listDataArr[indexArr[i]]["id"] + '" value="' + listDataArr[indexArr[i]]["上课日期"] + '"/>';
                    $(".event").append(html);
                }
                var myEvents = [];
                $('.event').find(".date").each(function (i, item) {
                    myEvents.push({
                        title: '课程',
                        className: 'dateEvent',
                        start: $(this).val(),
                        allDay: true
                    });
                })
                $('#calendar').fullCalendar({
                    // 头部信息
                    header: {
                        left: 'prevYear,nextYear',
                        center: 'title',
                        right: 'today prev,next'
                    },
                    events: myEvents,
                    handleWindowResize: false,
                    eventClick: function (calEvent, jsEvent, view) {
                        var selDate = $.fullCalendar.formatDate(calEvent.start, 'yyyy-MM-dd');
                        if (confirm("您确定要删除吗？")) {
                            $(".event").find(".date").each(function () {
                                if ($(this).val() == selDate) {
                                    $(this).remove();
                                }
                            });
                            for (var i = 0; i < myEvents.length; i++) {
                                var myEvent = myEvents[i];
                                if (myEvent.start == calEvent.start) {
                                    myEvents.splice(i, 1)
                                }
                            }
                            $(this)[0].remove();
                            var newObj = zzObj();
                            for(var i = 0;i<newObj.length;i++){
                                newObj[i].id = listIdArr[i];
                            }
                            var newlessonsObject = JSON.stringify(newObj);
                            $("[name='lessonsObject']").val(newlessonsObject);
                            console.log(newlessonsObject)

                        }
                    },
                    dayClick: function () {
                        var selDate = $(this).data("date");//格式化日期
                        var size = $('.event').find(".date").size();
                        var num = 0;
                        $('.event').find(".date").each(function () {
                            if ($(this).val() == selDate) {
                                num++;
                            }
                        })
                        if (num > 0) {
                            return;
                        }
                        if (size >= indexArr.length) {
                            alert("课程节数已超出");
                            return;
                        } else {
                            var selDate = $(this).data("date");//格式化日期
                            var html = '<input type="hidden" class="date" value="' + selDate + '">';
                            $(".event").append(html);
                            myEvents.push({
                                title: '课程',
                                className: 'dateEvent',
                                start: selDate,
                                allDay: true
                            });
                            $('#calendar').fullCalendar('refetchEvents');
                            console.log(listIdArr)
                            var newObj = zzObj();
                            for(var i = 0;i<newObj.length;i++){
                                newObj[i].id = listIdArr[i];
                            }
                            var newlessonsObject = JSON.stringify(newObj);
                            $("[name='lessonsObject']").val(newlessonsObject);
                            console.log(newlessonsObject)
                        };

                    }
                });
                var newObj = zzObj();
                for(var i = 0;i<newObj.length;i++){
                    newObj[i].id = listIdArr[i];
                }
                var newlessonsObject = JSON.stringify(newObj);
                $("[name='lessonsObject']").val(newlessonsObject);
                console.log(newlessonsObject)
            }
            if (type == 2) {
                $(".classChangeDiv").addClass("hidden");
                $(".classClosedDiv").removeClass("hidden");
                $("#startDate").val("");
                $("#startTimes").val("");
                $("#endTimes").val("");
                var html = '';
                for (var i = 0; i < indexArr.length; i++) {
                    var time;
                    if (i == indexArr.length - 1) {
                        time = '&nbsp;&nbsp;' + listDataArr[indexArr[i]]["上课日期"];
                    } else {
                        time = '&nbsp;&nbsp;' + listDataArr[indexArr[i]]["上课日期"] + ',';
                    }
                    html += time;
                }
                $(".classClosedDiv").empty().append('&nbsp;&nbsp;&nbsp;&nbsp;瑞宝爱阅读' + html + '&nbsp;&nbsp;即将进行课程操作；');
                $(".fc-header").remove();
                $(".fc-content").remove();
            }


        }

    }

    //    获取老师
    $(function () {
        /**
         * 获取教师
         */
        ajaxRequest("sysAdminUserController/getPostListByDuty.do", {
            duty: 3
        }, function (result) {N
            var data = result.data;
            var arr = ['']; //<option value="0">请选择</option>
            for (var i = 0; i < data.length; i++) {
                arr.push('<option value="' + data[i].id + '">' + data[i].realame + '</option>')
            }
            $("#adminUserId").html(arr.join(''))
        }, function () {
            ajaxError("加载员工信息失败");
        }, "post", "json");

        /**
         * 获取教师
         */
        ajaxRequest("tssClassRoomController/getClassRoomList.do", null, function (result) {
            var data = result.data;
            var arr = ['']; //<option value="0">请选择</option>
            for (var i = 0; i < data.length; i++) {
                arr.push('<option value="' + data[i].id + '">' + data[i].name + '</option>')
            }
            $("#roomId").html(arr.join(''))
        }, function () {
            ajaxError("加载教室信息失败");
        }, "post", "json");

    });
    $(".selectpicker_${serializeNum}").select2();
    $("#editForm_${serializeNum}").bind("ajaxSubmitCallback", function (event, result) {
        if (result.resCode == 200) {
            alert("保存成功");
            bootbox.hideAll();
        }
    });


</script>
<script src="assets/js/validation/bootstrapValidator_init.js"></script>
